<template>
	<view class="search-wrap">
		<view class="search-input">
			<view class="search-wrap-box">
				<image class="search-icon" src="http://k8s.vendingtech.vip/images/search_gray@2x.png"></image>
				<input class="search-info" placeholder-style="color:#999999" placeholder="搜索药品" confirm-type="search"
					@confirm="hist_on" type="text" v-model="keyword">
			</view>
			<view class="imput_fork_ico" v-if="keyword" @click="keyword_fork">
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_fork.png"
					mode="scaleToFill" />
			</view>
			<view class="hist_bott" @click="hist_on">搜索</view>
		</view>
		<view v-if="keyword_on" class="history">
			<view class="history_title">
				<view>搜索历史</view>
				<view @click="delHistory">清除历史</view>
			</view>
			<view class="history_time">
				<view v-for="value in historyArr" :key="value" @click="fast_history(value)">{{ value }}</view>
			</view>
		</view>

		<scroll-view v-if="!keyword_on && medicineList.length != 0" class="medicines-scroll" scroll-y="true"
			@scrolltolower="loadMoreMedicine()">
			<view class="medicine-card" v-for="(medicine, index) in medicineList" :key="index" :data="medicine"
				@click="gotoRouter('/pages-mall/medicineDetail/medicineDetail?id=' + medicine.id)">
				<image :src="medicine.thumbnailUrl" style="width: 100rpx;height: 100rpx;" mode="heightFix"></image>
				<view class="info-wrap">
					<view class="medicine-name">{{ medicine.name }}</view>
					<view class="medicine-abstract">{{ medicine.majorCure }}</view>
					<view class="price-line">
						<view class="current-price">￥{{ medicine.salesPrice }}</view>
						<view class="old-price">￥{{ medicine.originalPrice }}</view>
						<image
							src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_mall_add_cart.png"
							@click.stop="addCart(medicine)"></image>
					</view>
				</view>
			</view>
			<view v-if="totalSize == medicineList.length" class="end-line">～我是有底线的呢～</view>
			<view style="height: 40rpx;"></view>
		</scroll-view>
		<u-empty-state v-if="!keyword_on && medicineList.length == 0" value="暂无相关药品"></u-empty-state>

	</view>
</template>

<script>
import { searchHistory } from '@/utils/token.js'
export default {
	data() {
		return {
			keyword: '', //搜索
			keyword_on: true,
			pageNo: 1,  //页码
			pageSize: 20,
			medicineList: [],  //药品信息
			total: 0,  //总共数据
			historyArr: [],  //搜索历史
		}
	},
	onload() {
	},
	onShow() {
		this.pageNo = 1;
		this.medicineList = [];
		this.getHistory()
	},
	methods: {
		// 获取缓存里的搜索历史
		getHistory() {
			this.historyArr = searchHistory.get() || []
		},
		// 更新搜索历史缓存
		setHistory() {
			searchHistory.set(this.historyArr)
		},
		// 删除搜索历史
		delHistory() {
			this.historyArr = []
			searchHistory.clear()
		},
		// 清除搜索栏内容
		keyword_fork() {
			this.keyword = ''
			this.keyword_on = true
			this.getsearchDrug()
		},
		// 点击搜索
		hist_on() {
			this.pageNo = 1;
			this.medicineList = [];
			if (this.keyword) {
				this.keyword_on = false
				if (this.historyArr.indexOf(this.keyword) == -1) {
					this.historyArr.unshift(this.keyword)
					this.setHistory()
				}

				this.getsearchDrug()
			} else {
				this.keyword_on = true
			}
		},
		// 搜索药品
		getsearchDrug() {
			this.$api.getsearchDrug({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				keyword: this.keyword
			}).then(e => {
				const { code, result: { records, total } } = e
				if (code == 200) {
					this.medicineList = records
					this.total = total
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		},
		// 触底
		loadMoreMedicine() {
			if (this.pageNo * this.pageSize < this.total) {
				this.pageNo++
				this.getsearchDrug()
			}
		},

		// 快捷搜索
		fast_history(value) {
			this.keyword = value

			this.pageNo = 1;
			this.medicineList = [];
			this.keyword_on = false

			this.getsearchDrug()
			// this.hist_on()
		},

		addCart(medicine) {
			this.$api.addIntoCart({
				data: {
					commodityId: medicine.id,
					count: 1
				}
			}).then(res => {
				if (res.code == 200) {
					this.cartCount = this.cartCount + 1;
					uni.showToast({
						title: "加入购物车成功",
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style lang="less">
@import './searchDrug.less';
</style>
